<template>
  <div class="reset-data-container">
    <section class="login-user">
      <section class="login-line">
        <section class="login-name">手机号码</section>
        <section class="login-val">
          <input type="text"
                 name="mobile"
                 id="number"
                 placeholder="手机号"
                 v-model="mobile"
                 readonly />
        </section>
      </section>
      <div v-if="check_apply_mobile==1">
        <section class="login-line login-line-verify">
          <section class="login-name">验证码</section>
          <section class="login-val">
            <input class="img-verify-input"
                   type="text"
                   name="code"
                   placeholder="验证码"
                   id="code"
                   v-model="formData.verify" />
            <img :src="verifyImg"
                 class="img-verify"
                 @click="refreshVerify">
          </section>
        </section>
        <section class="login-line login-line-verify">
          <section class="login-name">短信验证码</section>
          <section class="login-val">
            <input class="msg-verify-input"
                   type="text"
                   name="code"
                   placeholder="短信验证码"
                   id="vcode"
                   v-model="formData.code" />
            <a class="msg-verify-btn red-gra-btn"
               href="javascript:;"
               @click="refreshmsgVerify">{{msgVerifyTxt}}</a>
          </section>
        </section>
      </div>
      <section class="login-line">
        <section class="login-name">新密码</section>
        <section class="login-val">
          <input type="password"
                 name="password"
                 placeholder="新密码"
                 v-model="formData.password" />
        </section>
      </section>
      <section class="login-line">
        <section class="login-name">新支付密码</section>
        <section class="login-val">
          <input type="password"
                 name="pay_password"
                 placeholder="支付密码"
                 v-model="formData.pay_password" />
        </section>
      </section>
    </section>
    <section class="btn-box">
      <div class="submit-btn red-gra-btn"
           @click="clickSubmit">保存</div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { resetPasswordInfo, resetPassword } from '@/api/user/member/memberApi'
import { getVerify, postMsgVerify } from '@/api/loginRegister/index'
import { validLength } from '@/utils/validate'
import { base64_encode } from '@/utils/index'
import { openPage } from '@/utils/utils'

export default Vue.extend({
  name: 'index',
  components: {},
  computed: {
    ...mapGetters(['wxConfig'])
  },
  data() {
    return {
      msgVerifyTxt: '获取验证码',
      verifyImg: '',
      mobile: '',
      check_apply_mobile: '',
      formData: {
        mobile: '',
        verify: '',
        code: '',
        password: '',
        pay_password: ''
      }
    }
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      resetPasswordInfo().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.mobile = resData.mobile
          this.formData.mobile = resData.mobile
          this.check_apply_mobile = resData.check_apply_mobile
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 刷新验证码
    refreshVerify() {
      getVerify().then(res => {
        // TODO 小程序验证码处理
          const src = `data:image/jpg;base64,${base64_encode(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
          this.verifyImg = src
      })
      
    },
    // 获取验证码倒计时
    setTimeoutVerify() {
      let count = 60
      this.msgVerifyTxt = count + '秒后重新获取'
      const timer = setInterval(() => {
        this.msgVerifyTxt = count + '秒后重新获取'
        if (count <= 0) {
          this.msgVerifyTxt = '获取验证码'
          clearInterval(timer)
        }
        count--
      }, 1000)
    },
    // 获取短信验证码
    refreshmsgVerify() {
      const mobile = this.mobile
      const verify = this.formData.verify
      if (this.msgVerifyTxt == '获取验证码') {
        if (validLength(verify)) {
          const data = { mobile: mobile, code: this.formData.verify }
          postMsgVerify(data).then(res => {
            if (res.status == 1) {
              this.setTimeoutVerify()
              this.$Error('发送成功')
            } else {
              this.$Error(res.msg)
            }
          })
        }
      }
    },

    // 提交
    clickSubmit() {
      /* const postData = {}
      if (this.check_apply_mobile == 1) {
        postData.mobile = this.formData.mobile
        postData.code = this.formData.code
        postData.password = this.formData.password
        postData.pay_password = this.formData.pay_password
      } else {
        postData.mobile = this.formData.mobile
        postData.password = this.formData.password
        postData.pay_password = this.formData.pay_password
      } */
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      resetPassword(this.formData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('保存成功')
            openPage(this.wxConfig.user_index_link)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.init()
    this.refreshVerify()
  }
})
</script>

<style lang="scss">
@import "../../../../../src/styles/mixin";
// TODO 小程序样式处理
.miniprogram-root {
  .reset-data-container .login-line .login-val {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .reset-data-container .login-line.login-line-verify .msg-verify-input {
    margin-right: 8px;
  }
}
.reset-data-container {
  @include placeColor(#999);
  input:disabled {
    background: transparent;
  }
  img[src=""] {
    // opacity: 0;
  }
  .login-user {
    background: #fff;
  }
  .login-line {
    display: flex;
    line-height: 96px;
    font-size: 32px;
    border-bottom: 1px solid #ededed;
    padding: 0 30px;
    box-sizing: border-box;
    .login-name {
      float: left;
      width: 30%;
      font-size: 28px;
      font-weight:bold;
      color: #333333;
    }
    .login-val {
      float: right;
      width: 70%;
      padding-right:30px;
      text-align: right;
      position: relative;
      input {
        font-size: 26px;
        color: #666666;
        border: 0;
        text-align: right;
        line-height: 90px;
        background: transparent;
      }
      &::after{
        content:"";
        position:absolute;
        top:42px;
        right:-4px;
        width:16px;
        height:16px;
        background:url("https://img.wifenxiao.com/h5-wfx/images/arrow_R.png") no-repeat;
        background-size:100% 100%;
      }
    }
    // .icon_calendar {
    //   font-size: 36px;
    // }
    &.login-line-verify {
      display: flex;
      align-items: center;
      .msg-verify-input,.img-verify-input {
        width: 50%;
        font-size: 26px;
        color: #999999;
      }
      .msg-verify-btn {
        display: inline-block;
        width: 150px;
        height: 54px;
        line-height: 54px;
        border-radius: 8px;
        text-align: center;
        font-size: 24px;
        color: #fff;
      }
      img {
        display: inline-block;
        width: 150px;
        height: 46px;
        vertical-align: middle;
      }
    }
  }
  .btn-box {
    padding: 40px 50px;
    // height: 90px;
    font-size: 32px;
    text-align: center;
    .submit-btn {
      margin-bottom: 20px;
      border-radius: 96px;
      line-height: 96px;
      color: #fff;
      box-sizing: border-box;
    }
  }
}
</style>